<template>
  <div class="container">
    <div id="cmsv6flash"></div>
    <div>
      <el-row :gutter="12">
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item>
              <span>车 牌 号：</span>
              <el-select v-model="vehicle" placeholder="请选择" filterable clearable>
                <el-option
                  v-for="item in vehicles"
                  :key="item.vid"
                  :value="item.did"
                  :label="item.vid"
                  :disabled="!item.online"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form" style="float: left">
            <el-form-item>
              <!-- <el-radio v-model="form.radioData" label="日">按日期：</el-radio> -->
              <span>查询日期：</span>
              <el-date-picker
                v-model="form.valueDay"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form" style="float: left">
            <el-button size="mini" type="primary" @click="searchPlayback"
              >查 询</el-button
            >
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table
    :default-sort = "{prop: 'beg', order: 'chn'}"
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      highlight-current-row
    >
      <el-table-column
        prop="file"
        :formatter="formatterFileName"
        label="文件名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="beg"
        label="时间"
        :formatter="formatterBeg"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="beg"
        label="时长"
        :formatter="formatterSecond"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="chn"
        label="频道"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="len"
        label="文件大小"
        :formatter="formatterLen"
        align="center"
      ></el-table-column>
      <!-- <el-table-column prop="出车率" label="操作"></el-table-column> -->
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-info"
            @click="handleEdit(scope.$index, scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>

    <el-dialog title="报警处置" :visible.sync="showVideo" width="700px">
      <iframe
        id="mainPicture"
        :src="playUrl"
        style="
          width: 700px;
          height: 420px;
          border-width: 0px;
          padding-left: 10px;
        "
      ></iframe>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showVideo = false">取 消</el-button>
        <!-- <el-button type="primary" @click="handleSubmit1()">处 置</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'
export default {
  data () {
    return {
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      vehicle: '',
      vehicles: [],
      form: {
        radioData: '日',
        valueDay: formatDate(new Date(new Date()), 'yyyy-MM-dd'),
        valueMonth: ''
      },
      tableData: [],
      showVideo: false,
      playUrl: ''
      // "ws://111.160.78.62:6611/3/5?DownType=5&jsession=&DevIDNO=078044372225&FILELOC=2&FILESVR=6&FILECHN=63&FILEBEG=21721&FILEEND=21730&PLAYIFRM=0&PLAYFILE=D:/gStorage/RECORD_FILE/078044372225/2023-12-08/02_64_6401_0_00078044372225231208060201000400.mp4&PLAYBEG=0&PLAYEND=0&PLAYCHN=0&YEAR=23&MON=12&DAY=8",
    }
  },
  created () {
    // if (localStorage.getItem('VIDEO_UID') === '0'){
    //     this.$message.warning('当前账号不支持视频监控')
    //     return;
    //   }
    this.axiosNew = this.$axios.create({
      baseURL: 'http://111.160.78.62:88/', //这是基础url
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      transformRequest: [function (data) {
        // Do whatever you want to transform the data
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }]
    });
    this.loginHuabao()
  },
  mounted () {
  },
  methods: {
    //详情
    handleEdit (index, row) {
      this.playUrl = 'http://111.160.78.62:4482/video.html?URL=' + row.PlaybackUrlWs;
      this.showVideo = true;
    },
    async loginHuabao () {
      const that = this;
      this.axiosNew.post('StandardApiAction_login.action', {
        account: localStorage.getItem('VIDEO_UID'),
        password: localStorage.getItem('VIDEO_PWD')
        // account: 'CDCHQ',
        // password: 'CDCHQ'
      })
        .then(function (response) {
          // console.log(response.data);
          // {result: 0, jsession: "86f3d85c-a196-4496-8b7e-27d50edd1783", account_name: "admin", JSESSIONID: "86f3d85c-a196-4496-8b7e-27d50edd1783"}
          // this.jsession = response.data.jsession;
          if (response.data.result == 0) {
            console.log(response.data.jsession)
            that.jsession = response.data.jsession
            that.getCarList()
          } else {
            this.$message.error('视频账号连接异常');
          }
        });
    },
    async getCarList () {
      const that = this;
      this.axiosNew.post('StandardApiAction_getDeviceOlStatus.action', {
        jsession: this.jsession
      })
        .then(function (response) {
          console.log(response.data);
          if (response.data.result == 0) {
            that.vehicles = response.data.onlines
            that.vehicles[3].online = 1
            console.log(that.vehicles)
          } else {
            this.$message.error('视频车辆列表获取异常');
          }
        });
    },
    async searchPlayback () {
      console.log(this.vehicle)
      const that = this;
      var arrDate = this.form.valueDay.split('-')
      this.axiosNew.post('StandardApiAction_getVideoFileInfo.action', {
        jsession: this.jsession,
        DevIDNO: this.vehicle,
        LOC: 1,
        CHN: -1,
        YEAR: arrDate[0],
        MON: arrDate[1],
        DAY: arrDate[2],
        RECTYPE: -1,
        FILEATTR: 2,
        BEG: 0,
        END: 86399,
        ARM1: 0,
        ARM2: 0,
        RES: 2,
        STREAM: 0,
        STORE: 0,
      })
        .then(function (response) {
          console.log(response.data);
          if (response.data.result == 0) {
            if ('files' in response.data) {
              that.tableData = response.data.files
              
            }else {
              that.$message.info('未查找到视频文件');
            }
          } else {
            that.$message.error('视频回放文件列表获取异常');
          }
        });
    },
    formatterBeg (row, column, cellValue, index) {
      let h = parseInt(cellValue / 60 / 60 % 24)
      let m = parseInt(cellValue / 60 % 60)
      let s = parseInt(cellValue % 60)
      //三元表达式 补零 如果小于10 则在前边进行补零 如果大于10 则不需要补零
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s

      let hE = parseInt(row.end / 60 / 60 % 24)
      let mE = parseInt(row.end / 60 % 60)
      let sE = parseInt(row.end % 60)
      //三元表达式 补零 如果小于10 则在前边进行补零 如果大于10 则不需要补零
      hE = hE < 10 ? '0' + hE : hE
      mE = mE < 10 ? '0' + mE : mE
      sE = sE < 10 ? '0' + sE : sE

      return /*this.form.valueDay + ' ' +*/ h + ':' + m + ':' + s + ' - ' + hE + ':' + mE + ':' + sE;
      // return `您输入的总秒速为：${second}秒\n转换后的时间为${h}小时${m}分钟${s}秒`
    },
    formatterSecond (row, column, cellValue, index) {
      var minent = parseInt((row.end - row.beg) / 60)
      var second = (row.end - row.beg) % 60
      return minent + '分' + second + '秒';
    },
    formatterLen (row, column, cellValue, index) {
      var mb = cellValue / (1024 * 1024); // 先将字节数除以1024*1024得到MB值
      return Math.round(mb * 100) / 100 + 'MB'; // 四舍五入保留两位小数并返回结果
    },
    formatterFileName (row, column, cellValue, index) {
      var arrName = cellValue.split(';')
      return arrName[6]+';'+arrName[7]+';'; // 获取最后三位字符
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    }
  }
}
</script>
<style>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  min-width: 400px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
</style>